<main id="clauseChange">
  <section class="house">
    <div class="title">房源信息</div>
    <div>
      <span>合同类型：</span>
      <p>{{contractDetail.contractType == 'ER'?'整租':'工位'}}合同</p>
    </div>
    <div>
      <span>签约项目：</span>
      <p class="mr-10">{{contractDetail.projectName}}</p>
      <hl-button type="primary" icon="icon-Org-account" size="small" @on-click="addHouse('unit')"    v-if="contractDetail.contractType == 'ER'">添加单元</hl-button>
      <hl-button type="primary" icon="icon-Org-account" size="small" @on-click="addHouse('station')" v-if="contractDetail.contractType != 'ER'">添加工位</hl-button>
      <hl-button type="primary" icon="icon-Org-account" size="small" @on-click="addHouse('park')">添加车位</hl-button>
    </div>
  </section>
  <hl-dialog :title="addType == 'unit'?'添加单元':(addType == 'park'?'添加车位':'添加工位')" :visible="addFlag"
    @on-close="addFlag = false" width="800" height="464">
    <!-- 选择单元 -->
    <div v-show="addType == 'unit'">
      <div class="Unit_container">
        <div class="screenRow">
          <span>选择楼宇：</span>
          <hl-select :data="buildingList" v-model="selectBuildingId" type="primary" width="235"
            @on-change="setBuilding">
          </hl-select>
          <span class="ml-10"></span>
          <span>选择楼层：</span>
          <hl-select :data="floorList" v-model="selectFloorId" type="primary" width="106" @on-change="setFloor">
          </hl-select>
          <span class="ml-10"></span>
          <hl-button @on-click="getUnit">查询</hl-button>
        </div>
        <div></div>
      </div>
      <div class="show_container">
        <span>单元：</span>
        <div class="unitlist">
          <span class="mr-10 ellipsis-1" v-for="item in unitList"
            :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
            v-if="item.unitType == 'BU' && item.rentState != 'ZY'" @click="selectUnitIds(item)">
            {{item.unitName}}
            <i class="icon-Nav-contract-choice selected-icon" v-if="_showSelectUnit_.indexOf(item.unitId) != -1"></i>
            </li>
        </div>
      </div>
      <div style="margin-top:10px;display: flex;justify-content: center;align-items: center">
        <hl-button type="primary" @on-click="sureAdd">确认添加</hl-button>
      </div>
    </div>
    <!-- 选择车位 -->
    <div v-show="addType == 'park'">
      <div class="Unit_container">
        <div class="screenRow">
          <span>楼宇：</span>
          <hl-select :data="buildingList" v-model="selectBuildingId" type="primary" width="235"
            @on-change="setBuilding">
          </hl-select>
          <span class="ml-10"></span>
          <span>楼层：</span>
          <hl-select :data="floorList" v-model="selectFloorId" type="primary" width="106" @on-change="setFloor">
          </hl-select>
          <span>单元：</span>
          <hl-select :data="unitList" v-model="selectUnitId" type="primary" width="106" @on-change="setUnit">
          </hl-select>
          <span class="ml-10"></span>
          <hl-button @on-click="getPark_station">查询</hl-button>
        </div>
        <div></div>
      </div>
      <div class="show_container">
        <span>车位：</span>
        <div class="unitlist">
          <span class="mr-10 ellipsis-1" v-for="item in parkList"
            :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
            v-if="item.rentState != 'ZY'" @click="selectParkIds_stations(item)">
            {{item.positionName}}
            <i class="icon-Nav-contract-choice selected-icon"
              v-if="_showSelectPark_.indexOf(item.positionId) != -1"></i>
            </li>
        </div>
      </div>
      <div style="margin-top:10px;display: flex;justify-content: center;align-items: center">
        <hl-button type="primary" @on-click="sureAdd">确认添加</hl-button>
      </div>
    </div>
    <!-- 选择工位 -->
    <div v-show="addType == 'station'">
      <div class="Unit_container">
        <div class="screenRow">
          <span>楼宇：</span>
          <hl-select :data="buildingList" v-model="selectBuildingId" type="primary" width="235"
            @on-change="setBuilding">
          </hl-select>
          <span class="ml-10"></span>
          <span>楼层：</span>
          <hl-select :data="floorList" v-model="selectFloorId" type="primary" width="106" @on-change="setFloor">
          </hl-select>
          <span>单元：</span>
          <hl-select :data="unitList" v-model="selectUnitId" type="primary" width="106" @on-change="setUnit">
          </hl-select>
          <span class="ml-10"></span>
          <hl-button @on-click="getPark_station">查询</hl-button>
        </div>
        <div></div>
      </div>
      <div class="show_container">
        <span>工位：</span>
        <div class="unitlist">
          <span class="mr-10 ellipsis-1" v-for="item in parkList"
            :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
            v-if="item.rentState != 'ZY'" @click="selectParkIds_stations(item)">
            {{item.positionName}}
            <i class="icon-Nav-contract-choice selected-icon"
              v-if="_showSelectStation_.indexOf(item.positionId) != -1"></i>
            </li>
        </div>
      </div>
      <div style="margin-top:10px;display: flex;justify-content: center;align-items: center">
        <hl-button type="primary" @on-click="sureAdd">确认添加</hl-button>
      </div>
    </div>
  </hl-dialog>
  <!-- 添加的单元 -->
  <div v-if="contractDetail.selectUnitList.length" class="mb-10">
    <div class="title">签约单元({{contractDetail.selectUnitList.length}})</div>
    <div class="hltable_unit_park_wp">
      <div class="hl-table-head dy-flex">
        <ul class="dy-fx-5">楼宇</ul>
        <ul class="dy-fx-2">楼层</ul>
        <ul class="dy-fx-2">单元</ul>
        <ul class="dy-fx-3">面积(m²)</ul>
        <ul class="dy-fx-2">操作</ul>
      </div>
      <div class="hl-table-body">
        <ul v-for="(item,index) in contractDetail.selectUnitList" class="dy-flex"
          :class="{'border-b':index != contractDetail.selectUnitList.length-1}">
          <li class="dy-fx-5 border-r">{{item.building_name}}</li>
          <li class="dy-fx-2 border-r">{{item.floor_name}}</li>
          <li class="dy-fx-2 border-r">{{item.unit_name}}</li>
          <li class="dy-fx-3 border-r">{{item.unit_acreage}}</li>
          <li class="dy-fx-2"><i class="icon-Gm-delete-2 color-999" @click="contractDetail.selectUnitList.splice(index,1)"></i></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 添加的车位 -->
  <div v-if="contractDetail.selectParkList.length" class="mb-10">
    <div class="title">签约车位({{_showSelectPark_.length}})</div>
    <div class="hltable_unit_park_wp">
      <div class="hl-table-head dy-flex">
        <ul class="dy-fx-5">楼宇</ul>
        <ul class="dy-fx-2">楼层</ul>
        <ul class="dy-fx-2">单元</ul>
        <ul class="dy-fx-2">车位数</ul>
        <ul class="dy-fx-5">车位清单</ul>
      </div>
      <div class="hl-table-body">
        <ul v-for="(item,index) in contractDetail.selectParkList" class="dy-flex"
          :class="{'border-b':index != contractDetail.selectParkList.length-1}" v-if="item.stops.length > 0">
          <li class="dy-fx-5 border-r">{{item.building_name}}</li>
          <li class="dy-fx-2 border-r">{{item.floor_name}}</li>
          <li class="dy-fx-2 border-r">{{item.unit_name}}</li>
          <li class="dy-fx-2 border-r">{{item.stops.length}}</li>
          <li class="dy-fx-5 operateArea">
            <span v-for="(single,num) in item.stops">
              {{single.stop_name}}
              <i class="icon-Gm-delete-2" @click="item.stops.splice(num,1)"></i>
            </span>
            </i></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 添加的工位 -->
  <div v-if="contractDetail.selectStationList.length" class="mb-10">
    <div class="title">签约工位({{_showSelectStation_.length}})</div>
    <div class="hltable_unit_park_wp">
      <div class="hl-table-head dy-flex">
        <ul class="dy-fx-5">楼宇</ul>
        <ul class="dy-fx-2">楼层</ul>
        <ul class="dy-fx-2">单元</ul>
        <ul class="dy-fx-2">工位数</ul>
        <ul class="dy-fx-5">工位清单</ul>
      </div>
      <div class="hl-table-body">
        <ul v-for="(item,index) in contractDetail.selectStationList" class="dy-flex"
          :class="{'border-b':index != contractDetail.selectStationList.length-1}" v-if="item.stops.length > 0">
          <li class="dy-fx-5 border-r">{{item.building_name}}</li>
          <li class="dy-fx-2 border-r">{{item.floor_name}}</li>
          <li class="dy-fx-2 border-r">{{item.unit_name}}</li>
          <li class="dy-fx-2 border-r">{{item.stops.length}}</li>
          <li class="dy-fx-5 operateArea">
            <span v-for="(single,num) in item.stops">
              {{single.stop_name}}
              <i class="icon-Gm-delete-2" @click="item.stops.splice(num,1)"></i>
            </span>
            </i></li>
        </ul>
      </div>
    </div>
  </div>


  <hl-button  type="primary" @on-click="next  ">下一步</hl-button>
  <hl-button  type="outline" @on-click="previous">上一步</hl-button>
</main>
<style>
  .title {
    color: #A5AAB7;
    margin-bottom: 10px;
  }

  .house>div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .house>div>span {
    color: #999;
  }

  .house>div>p {
    color: #666;
  }

  .screenRow {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
  }

  .show_container {
    min-height: 300px;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0;
  }

  .show_container>span {
    display: inline-block;
    width: 48px;
  }

  .unitlist {
    width: 720px;
  }

  .unitlist span {
    display: inline-block;
    min-width: 80px;
    max-width: 190px;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    color: #fff;
    padding: 0 25px 0 5px;
    margin-bottom: 10px;
  }

  .unitlist span i {
    position: absolute;
    top: 10px;
    right: 5px;
  }

  .hl-dialog .hl-dialog__body {
    padding: 10px 16px;
  }
</style>
<script src="modules/contratchange/scripts/clause_change.js" charset="utf-8"></script>
